<template>
  <div class="department-container">
    <div class="app-container">
      <el-card>
        <!-- 具体页面结构 -->
        <!-- 员工管理 -->

        <!-- 自定义组件 -->
        <PageTools>
          <!-- 左侧 -->
          <template #left>
            总记条数:20条
          </template>
          <!-- 右侧 -->
          <template #right>
            <el-button type="danger" size="small"><a href="https://www.xiaomi.com">小米商城</a></el-button>
            <el-button type="warning" size="small" @click="$router.push('/import')">excel导入</el-button>
            <el-button
              v-allow="'导出'"
              type="danger"
              size="small"
              @click="hExportExcel"
            >excel导出</el-button>
            <el-button type="primary" size="small" @click="hAdd">新增员工</el-button>
          </template>
          <PageTools />
        </pagetools>
      </el-card>

      <!-- 表格 分页 -->
      <el-card style="margin-top: 10px;">
        <!-- 表格 -->
        <el-table :data="list" border :default-sort="{prop: 'workNumber'}">
          <el-table-column label="序号" type="index" />
          <el-table-column label="姓名" prop="username" />

          <el-table-column label="照片">
            <template v-slot="scope">
              <ImageHolder :src="scope.row.staffPhoto" />
            </template>
          </el-table-column>

          <el-table-column label="工号" prop="workNumber" />

          <el-table-column label="聘用形式">
            <template v-slot="scope">
              {{ formartType(scope.row.formOfEmployment) }}
            </template>
          </el-table-column>

          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间" prop="timeOfEntry" sortable />
          <el-table-column label="操作" width="280">
            <template v-slot="scope">
              <!-- ❗哥们拼接路径tm少些=，已经两次了 -->
              <el-button type="text" size="small" @click="$router.push('/employees/detail?id='+scope.row.id)">查看</el-button>
              <el-button type="text" size="small" @click="hAssignRole(scope.row.id)">分配角色</el-button>
              <el-button type="text" size="small" @click="hDel(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <!--
            :page-size="size" - 一页几条
            :current-page.sync="page" - 第几页
            :total="total" - 总条数
           -->
          <el-pagination
            :total="total"
            layout="total, sizes, prev, pager, next"
            :page-size="size"
            :current-page.sync="page"
            :page-sizes="[3, 5, 10, 20]"
            @current-change="hCurrentChange"
            @size-change="hSizeChange"
          />
        </el-row>
      </el-card>
    </div>
    <!-- 添加 -->
    <el-dialog title="添加" :visible.sync="showDialog">
      <EmpDialog
        v-if="showDialog"
        @close="hClose"
        @success="hSuccess"
      />
    </el-dialog>
    <!-- 分配角色 -->
    <el-dialog title="分配角色" :visible.sync="showDialogRoles">
      <AssignRole
        v-if="showDialogRoles"
        :cur-employees-id="curId"
        @success="hSuccessRoles"
        @cancel="hCancel"
      />
    </el-dialog>
  </div>
</template>

<script>
// 分页
import AssignRole from './assignRole.vue'
import { getEmployees, deleteEmployees } from '@/api/employee.js'
// 抽取的弹层表格
import EmpDialog from './empDialog.vue'
// 将constant前后端交互数据格式转换要求导入
import EmployeeEnum from '@/constant/employees'
// 数据id转字符串
const EMPLOYTYPE = EmployeeEnum.hireType.reduce((acc, item) => { acc[item.id] = item.value; return acc }, {})
console.log('------', EMPLOYTYPE)
// 日期转换
import * as moment from 'moment'
export default {
  // 注册弹层表格
  components: { EmpDialog, AssignRole },
  // 数据
  data() {
    return {
      // 1.获取员工列表
      list: [],
      // 2.分页数据
      page: 1,
      size: 10,
      total: 0,
      // 3.弹层默认值
      showDialog: false, // 这个是添加的弹层显示
      showDialogRoles: false, // 这个是分配角色的弹层显示
      curId: ''
    }
  },
  created() {
    // 1.获取员工列表 - 调用
    this.loadEmployees()
  },
  methods: {
    // 子传父，关闭弹层
    hCancel() {
      this.showDialogRoles = false
    },
    // 点击分配角色按钮,给对应的员工分配不同权限的角色
    hSuccessRoles() {
      this.showDialogRoles = false
    },
    // 点击分配角色按钮，打开弹层，并绑定对应角色的id，id由点击事件触发时，传入对应员工的id编码
    hAssignRole(id) {
      // 打开弹层
      this.showDialogRoles = true
      // 绑定data
      this.curId = id
    },
    // 日期格式转换为对应的年月日
    dateFormat(date) {
      return moment(date).format('YYYY-MM-DD')
    },
    // 封装格式转化的函数 -- 将后台返回回来的数据转化为excel表格所需要的数据格式
    transformExcel(rows) {
      const mapInfo = {
        '入职日期': 'timeOfEntry',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName',
        '聘用形式': 'formOfEmployment'
      }
      // 将表头的英文转化为中文
      const header = Object.keys(mapInfo)

      // data中数据转化
      let data = []
      data = rows.map(item => {
        // 遍历header中的中文
        return header.map(ele => {
          // 用对象中括号语法把mapInfo中所有的英语取出
          const englishName = mapInfo[ele]
          // 当遍历到formOfEmployment时，让该item[englishName]元素对应的聘用形式(1,2)转为('正式'和'非正式')或‘不知道’
          if (englishName === 'formOfEmployment') {
            item[englishName] = EMPLOYTYPE[item[englishName]] || '不知道'
          } else if (englishName === 'timeOfEntry' || englishName === 'correctionTime') {
            // 当遍历到formOfEmployment时，让该item[englishName]元素对应的入职、离职时间转为('年月日')
            item[englishName] = this.dateFormat(item[englishName])
          }
          // [{元素},{元素},{元素},{...}]
          // 需要转换格式的元素(每一个元素)在if - elseif中判断，不需要的元素直接进入这里的return，输出到data中
          return item[englishName]
        })
      })
      // 将表头header和表格内容data - return给 - hExportExcel
      return { header, data }
    },
    // 导出 excel
    hExportExcel() {
      // 导入vendor里面的函数
      import('@/vendor/Export2Excel').then(async excel => {
        const res = await getEmployees(this.page, this.size)
        const { header, data } = this.transformExcel(res.data.rows)
        // 导出的文件
        console.log('导出的文件', header, data)
        // 导出到excel
        excel.export_json_to_excel({
          // 发请求获取数据
          header, // 表头 必填
          data, // 具体数据 必填
          filename: 'excel-list', // 文件名称
          autoWidth: true, // 宽度是否自适应
          bookType: 'xlsx' // 生成的文件类型
        })
      })
    },
    // page 点击的第几页
    hCurrentChange(curPage) {
      console.log('', curPage)
      // 1.点击的第几页
      this.page = curPage
      // 2.重发请求
      this.loadEmployees()
    },
    // 一页多少条
    hSizeChange(curSize) {
      console.log('', curSize)
      // 0.修改每页显示几条，页码直接定位到第一页
      this.page = 1
      // 1.点击的第几页
      this.size = curSize
      // 2.重发请求
      this.loadEmployees()
    },
    // 0.定义数据转化的函数
    formartType(typeId) {
      return EMPLOYTYPE[typeId] || '不确定'
    },
    // 1.获取员工列表 - 执行
    async loadEmployees() {
      const res = await getEmployees({ page: this.page, size: this.size })
      // 1.1绑定每一页的数据到data
      this.list = res.data.rows
      // 2.将后台返回的数据总数绑定到data
      this.total = res.data.total
      console.log('第八天 - 员工管理信息列表获取', res)
    },
    // 2.删除时 - 调用获取角色的接口刷新列表
    async doDel(id) {
      try {
        // 1.调用接口
        const res = await deleteEmployees(id)
        console.log('传id调用删除api', res)
        // 2.提示删除成功
        this.$message.success('删除成功')
        // 3.判断 - 当页面只剩一条数据的时候进去判断条件
        if (this.list.length === 1) {
          // 把页码存入page
          let page = this.page
          // 当前页面只剩一条数据时，让页码 -1
          page--
          // 求最大值 - 只要 1
          page = Math.max(1, page)
          // 数据在填回去
          this.page = page
        }
        // 4.重新刷新角色数据
        this.loadEmployees()
      } catch (err) {
        this.$message.error('删除失败')
      }
    },
    // 3.提示删除 - 删除
    hDel(id) {
      this.$confirm('是否要删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 重发请求 - 调用获取角色的接口刷新列表
        this.doDel(id)
      }).catch(() => {

      })
    },
    // 4.点击新增员工显示弹层
    hAdd() {
      this.showDialog = true
    },
    // 5.子传父 点击取消关闭弹层
    hClose() {
      this.showDialog = false
    },
    // 6.子传父 - 提醒添加成功
    hSuccess() {
      // 添加成功 - 提醒
      this.$message.success('添加成功')
      // 关闭弹层
      this.showDialog = false
      this.total++
      // 最后一页
      this.page = Math.ceil(this.total / this.size)
      // 刷新列表
      this.loadEmployees()
    },
    // 点击你好世界按钮，跳转页面至百度
    hello() {

    }
  }
}
</script>
